<script setup lang="ts">
defineOptions({
  name: "deviceStatisticsTasks"
});
import { ref } from "vue";
import { ArrowRightBold } from "@px-ui/icons-vue";
import modelBox from "@/views/common/components/modelBox/index.vue";
import deviceStatisticsTasksTotal from "./deviceStatisticsTasksTotal.vue";
import deviceStatisticsTasksItem from "./deviceStatisticsTasksItem.vue";
import { useInitLoading } from "@/hooks/useCommon";
import { loadingTimeout } from "@/utils/http/constant";
import { getToken } from "@/utils/auth";

interface Props {
  queryData?: any;
  height?: number;
  arrow?: boolean;
  dark?: boolean;
  title?: string;
  classCode?: string;
}

const props = withDefaults(defineProps<Props>(), { height: 200, arrow: false, dark: false, title: "今日任务", classCode: "GAS" });

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const deviceStatisticsTasksClass = ref<string>(`deviceStatisticsTasks_${Math.random().toString(36).slice(2, 10)}`);
const loadingInstance = ref<any>(null);
const list = ref<any>([]);

const accessToken = getToken().accessToken || "";
const init = async () => {
  list.value.splice(0);
  if (!props?.queryData) return;
  const {
    totalStat = null,
    safetyHazardTasks = null,
    callInWorkOrder = null,
    pmTasks = null,
    inspectionTasks = null,
    maintenanceTasks = null
  } = props.queryData;
  if (!totalStat) return;
  list.value.push({ icon: "totalStat", label: "总计", ...totalStat });
  if (!safetyHazardTasks) return;
  // path 待定
  list.value.push({
    icon: "safetyHazardTasks",
    label: "安全隐患任务",
    path: "/all/safeManage/defect",
    query_done: { status: "DONE" },
    query: { className: props.classCode, status: "" },
    ...safetyHazardTasks
  });
  if (!callInWorkOrder) return;
  // path 待定
  list.value.push({ icon: "callInWorkOrder", label: "话务工单", path: "", ...callInWorkOrder });
  if (!pmTasks) return;
  let facCode = localStorage.getItem("facCode");
  // path 设备管理-设备保养-保养任务
  list.value.push({
    icon: "pmTasks",
    label: "保养任务",
    path: "/all/equip/epm/task/list",
    query_done: {
      fullpath: `/pmJob/list?ssoToken=${accessToken}&isHiddenMenu=true&className=${props.classCode}&jobStatus=["COMPLETED"]&facCode=${facCode}`
    },
    query: { fullpath: `/pmJob/list?ssoToken=${accessToken}&isHiddenMenu=true&className=${props.classCode}&jobStatus=[]&facCode=${facCode}` },
    ...pmTasks
  });
  if (!inspectionTasks) return;
  // path 待定
  list.value.push({
    icon: "inspectionTasks",
    label: "设备巡检任务",
    path: "/all/equip/inspect/task",
    query_done: { taskStatusList: "6-7" },
    query: { className: props.classCode, taskStatusList: "" },
    ...inspectionTasks
  });
  if (!maintenanceTasks) return;
  // path 设备管理-设备维修-维修任务
  list.value.push({
    icon: "maintenanceTasks",
    label: "设备维修任务",
    path: "/all/equip/maintain/task",
    query_done: { status: "8" },
    query: { className: props.classCode, type: "list", status: "" },
    ...maintenanceTasks
  });
};

const initLoading = () => {
  const target = `.${deviceStatisticsTasksClass.value}`;
  loadingInstance.value = useInitLoading(target);
  setTimeout(() => {
    loadingInstance.value.close();
  }, loadingTimeout);
  return loadingInstance.value;
};

const clickHandler = () => emits("btn-click");

defineExpose({
  init,
  initLoading,
  loadingInstance
});
</script>

<template>
  <modelBox :title="title" :borderRadius="false" :dark="dark">
    <px-scrollbar v-if="list?.length" :wrap-class="deviceStatisticsTasksClass">
      <div class="device-statistics-tasks">
        <div class="device-statistics-tasks-top">
          <deviceStatisticsTasksTotal :data="list[0]" :dark="dark" />
        </div>
        <div class="device-statistics-tasks-bottom">
          <div v-for="item in list.slice(1)" :key="item.icon" class="device-statistics-tasks-item">
            <deviceStatisticsTasksItem :data="item" :dark="dark" />
          </div>
        </div>
      </div>
    </px-scrollbar>
    <px-empty v-else :image-size="56" :class="deviceStatisticsTasksClass" />
    <template v-if="arrow" #title>
      <px-button :icon="ArrowRightBold" type="primary" text plain @click="clickHandler" />
    </template>
  </modelBox>
</template>

<style lang="scss" scoped>
.px-scrollbar {
  width: 100%;
  height: 100%;

  :deep(.px-scrollbar__view) {
    width: 100%;
    height: 100%;

    .device-statistics-tasks {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 100%;
      height: 100%;

      .device-statistics-tasks-top {
        width: 100%;
      }

      .device-statistics-tasks-bottom {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .device-statistics-tasks-item {
          flex: 1;
          min-width: 100px;
          // background-color: pink;
          // cursor: pointer;
        }
      }
    }
  }
}

.px-button {
  padding-right: 0;
}
</style>
